<template>
  <div class="lc-table-container">
    <p class="seg-title">基础表格</p>
    <lc-table-integration
      border
      ref="lcTableRef"
      v-loading="loading"
      :tableData="tableData"
      :columns="columns"
      :pagination="true"
      :allowDrop="false"
      columnType=""
      tableMultiLine=""
      :selection="false"
      :tableTools="false"
      :showSummary="false"
      :paginationConfig="paginationConfig"
      requestConfig=""
      :tableRowClassName="tableRowClassName"
      @page-change="handlePageChange"
      @size-change="handleSizeChange"
    >
      <template #custom-slot-order="{ index }">
        <span>{{
          tableRowOrder(
            paginationConfig.currentPage,
            paginationConfig.pageSize,
            index,
          )
        }}</span>
      </template>
      <template #custom-slot-systemName="{ row }">
        <el-link type="primary">{{ row.systemName }}</el-link>
      </template>
      <template #custom-slot-status="{ row }">
        <el-tag :type="statusTagType(row.status)">{{ row.status }}</el-tag>
      </template>
      <template #custom-slot-textWidth="{ row }">
        <span>{{ row.textWidth }}</span>
      </template>
      <template #custom-slot-operate="{ row }">
        <div class="btn-wrapper">
          <el-button type="primary" round size="small" @click="handleChain(row)"
            >编辑</el-button
          >
          <el-button round size="small" type="danger" @click="handleDetail(row)"
            >删除</el-button
          >
        </div>
      </template>
    </lc-table-integration>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { tableRowOrder } from "@/utils/format";

defineOptions({
  name: "Table9527",
});

// 表格 start
const lcTableRef = ref(null);
const loading = ref(false);
const tableData = ref([
  {
    batchSeq: "001",
    systemName: "xx系统001",
    textWidth:
      "这是一段溢出的文本这是一段溢出的文本这是一段溢出的文本这是一段溢出的文本",
    createDate: "2001-02-22",
    status: "1",

    appName: "应用名称1",
  },
  {
    batchSeq: "003",
    systemName: "xx操作系统002",
    textWidth:
      "这是一段溢出的文本这是一段溢出的文本这是一段溢出的文本这是一段溢出的文本",
    createDate: "2001-02-22",
    status: "2",

    appName: "应用名称1",
  },
]);
const columns = [
  {
    label: "序号",
    width: 60,
    slot: true,
    slotName: "custom-slot-order",
  },
  {
    label: "批次号",
    prop: "batchSeq",
    minWidth: 120,
  },
  {
    label: "系统名称",
    prop: "systemName",
    minWidth: 120,
    slot: true,
    slotName: "custom-slot-systemName",
  },
  {
    label: "模拟文字溢出项",
    prop: "textWidth",
    minWidth: 200,
    slot: true,
    slotName: "custom-slot-textWidth",
  },
  {
    label: "创建时间",
    prop: "createDate",
    minWidth: 120,
  },
  {
    label: "处理状态",
    prop: "status",
    minWidth: 120,
    slot: true,
    slotName: "custom-slot-status",
  },
  {
    label: "操作",
    width: 180,
    slot: true,
    slotName: "custom-slot-operate",
    fixed: "right",
  },
];
// 分页参数
const paginationConfig = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
});
/**分页page-change事件 */
const handlePageChange = (page) => {
  paginationConfig.currentPage = page;
  getTableData();
};
/**分页size-change事件 */
const handleSizeChange = (size) => {
  paginationConfig.pageSize = size;
  getTableData();
};
/**获取表格数据 */
const getTableData = () => {
  loading.value = true;
  // 获取表格数据
};
// 设置tag类型
const statusTagType = (val) => {
  if (val == "1") {
    return "primary";
  } else if (val == "2") {
    return "success";
  } else {
    return "primary";
  }
};
// 设置表格高亮样式
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex === 0) {
    return "warning-row";
  } else if (rowIndex === 1) {
    return "success-row";
  }
  return "";
};
// 表格 end
</script>
<style scoped>
.lc-table-container {
  margin-right: 0 auto;
  padding: 20px;

  .seg-title {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
    font-size: 16px;
    font-weight: 600;
  }

  .seg-title:first-child {
    border-top: none;
    padding-top: 0px;
    margin-top: 0px;
    font-size: 16px;
    font-weight: 600;
  }
}
:deep(.el-table .warning-row) {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
:deep(.el-table .success-row) {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
